<template>
	<view class>
		<!-- 订单列表 -->
		<view class="header-top flex text-center font-size-15 font-color-888">
			<text
				class="header-item flex-1 font-size-15"
				v-for="(tab , i) in tab_list"
				:key="i"
				:class="{'active':i==tab_index}"
				@click="changeTab(i)"
			>{{tab.name}}</text>
		</view>
		<view class="container">
			<block v-for="(item,index) in tab_list[tab_index].all_list" :key="index">
				<view class="order-item pos-rel mar-t-10">
					<view class="order-item-header bac-color-f8">
						<view class="font-color-fff font-size-15 tq-text-line1">
							<text>预约人姓名：{{item.link_man}}</text>
							<!-- <slot name="name"></slot> -->
						</view>
						<view class="font-color-fff font-size-13 mar-t-10 tq-text-line1">
							<text>咨询类型：{{item.tag}}</text>
							<!-- <slot name="name"></slot> -->
						</view>
						<view class="font-color-fff font-size-13 mar-t-10">
							<text>预约时间：{{transformTime(item.start_time)}}</text>
							<!-- <slot name="start_time"></slot> -->
						</view>
					</view>
					<view class="order-item-footer pos-abs font-size-13">
						<block v-if="item.status==1">
							<view class="dis-inline-block btn cancel-btn" @click="confirmServer(item.order_no)">
								<text>确认服务</text>
							</view>
						</block>
						<block v-if="item.status == 2">
							<view class="dis-inline-block btn cancel-btn">
								<text>已服务(待评价)</text>
							</view>
						</block>

						<block v-if="item.status == 3">
							<navigator url="/pages/counselor/evaluate"  class="dis-inline-block btn cancel-btn">
								<text>已完成</text>
							</navigator>
						</block>
					</view>
				</view>
			</block>
		</view>
		<no-more v-if="tab_list[tab_index].index_page >= tab_list[tab_index].total_page"></no-more>
	</view>
</template>

<script>
import { myOrders } from '@/utils/http'
import consultOrderList from '@/components/consult-order-list'

export default {
	data() {
		return {
			tab_list: [],
			tab_index: 0
		}
	},
	components: {
		consultOrderList
	},
	methods: {
		changeTab(i) {
			this.tab_index = i
			const current_tab = this.tab_list[this.tab_index]
			if (current_tab.index_page == 0) {
				this.getOrderList()
			}
		},
		getOrderList() {
			let current_tab = this.tab_list[this.tab_index]
			myOrders({
				page: current_tab.index_page + 1,
				status: current_tab.status
			}).then(res => {
				if (res) {
					current_tab.index_page = res.current_page
					current_tab.total_page = res.last_page
					current_tab.all_list = [
						...res.data,
						...current_tab.all_list
					]
				} else {
					current_tab.total_page = current_tab.index_page
				}
				// console.log(this.tab_list)
			})
		},
		goChat(order_no) {
			uni.navigateTo({
				url: '/pages/counselor/chat?order_no=' + order_no
			})
		},
		//初始化数据
		init() {
			this.tab_list = [
				{
					name: '全部',
					status: '',
					index_page: 0,
					total_page: 1,
					all_list: []
				},
				{
					name: '未服务',//待咨询师反馈
					index_page: 0,
					total_page: 1,
					status: 1,
					all_list: []
				},
				{
					name: '待评价',//待用户评价
					status: 2,
					index_page: 0,
					total_page: 1,
					all_list: []
				},
				{
					name: '已完成',
					status: 3,
					index_page: 0,
					total_page: 1,
					all_list: []
				},
				
			]
			this.tab_index = 0
		},
		//确认服务
		confirmServer(order_no) {
			this.href('/pages/counselor/confirm?order_no='+order_no)
			// let _that = this
			// uni.showModal({
			// 	title: '提示',
			// 	content: '是否确认服务',
			// 	success(res) {
			// 		if (res.confirm) {
			// 			confirmServer({ order_no }).then(res => {
			// 				_that.init()
			// 				_that.getOrderList()
			// 			})
			// 		}
			// 	}
			// })
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.index_page = 0
		this.total_page = 1
		this.list = []
	},
	//上拉加载
	onReachBottom() {
		let current_tab = this.tab_list[this.tab_index]
		if (current_tab.index_page < current_tab.total_page) {
			this.getOrderList()
		}
	},
	onLoad() {
		this.init()
		this.getOrderList()
	}
}
</script>

<style scoped>
.header-top {
	padding: 15px 10px;
}
.header-top .active {
	font-weight: bold;
	color: #0088ff !important;
}
.bac-color-f8 {
	background-color: #376eff;
}
</style>
